<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>销售统计</title>
</head>
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/sales-statistics.css">
  <script src="../lib/jquery-1.11.3.js"></script>
  <script src="../JavaScript/Highcharts-9.3.2/code/highcharts.js"></script>
  <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>  
  <link rel="stylesheet" href="../css/index.css"> 
  <link rel="stylesheet" href="../font/iconfont.css">
<body>
  <div class="kong11"></div>
  <div id="mulu">
    <!-- 导航 -->
    <div id="cateHead">
      <p><span>首页 / 数据统计 / </span>销售统计</p>
      <p>销售统计</p>
  </div>
</div>
  
  <div>
    <div class="row">
      <div class="col-md-10 col-md-offset-1 bjys">
        <p>各类目交易情况</p>
        <div class="xuanxiangka clear">
          <div class="xx">
            <div onclick="dianji(this)">本月</div><div onclick="dianji(this)">本季度</div><div onclick="dianji(this)">本年</div>
          </div>
          <input type="text" value="2019-07-01至2019-07-07 " >
          
          <div id="xiaoliang">
          </div>
          <div id="xiaoshoue">
          </div>
          <div id="leimu">
          <p>各类目统计数据</p>
          <div id="biaoti"><span>商品类目</span><span>销售数量</span><span>销售占比</span><span>环比变化</span><span>销售金额</span><span>销售额占比</span><span>环比变化</span></div>
          <div id="znsh"><span>智能手环</span><span></span><span></span><span>⬆3.21</span><span></span><span></span><span>⬆3.21</span></div>
          <div id="znc"><span>智能称</span><span></span><span></span><span>⬆3.23</span><span></span><span></span><span>⬆3.23</span></div>
          <div id="smgl"><span>睡眠管理</span><span></span><span></span><span>⬆1.23</span><span></span><span></span><span>⬆1.23</span></div>
          <div id="yyjk"><span>营养健康</span><span></span><span></span><span>⬆0.26</span><span></span><span></span><span>⬆0.26</span></div>
          <div id="hlqj"><span>护理清洁</span><span></span><span></span><span>⬇3.23</span><span></span><span></span><span>⬇3.23</span></div>
          <div id="znsb"><span>智能手表</span><span></span><span></span><span>⬇2.08</span><span></span><span></span><span>⬇2.08</span></div>
          <div id="xyj"><span>血压计</span><span></span><span></span><span>⬇1.25</span><span></span><span></span><span>⬇1.25</span></div>
          <div id="ydhw"><span>运动户外</span><span></span><span></span><span>⬇0.17</span><span></span><span></span><span>⬇0.17</span></div>
        </div>
        </div>
      </div>

      <div class="col-md-10 col-md-offset-1 bjys">
        <p>商品销售情况</p>
        <div class="xuanxiangka clear">
          <div class="xx">
            <div onclick="dianji(this)">本月</div><div onclick="dianji(this)">本季度</div><div onclick="dianji(this)">本年</div>
          </div>  
          <input type="text" value="2019-07-01至2019-07-07 " >        
        </div>
        <div id="goodsType"><span>商品类目：</span><span onclick="filtrate('智能手环','categoryName',this)">智能手环</span><span onclick="filtrate('智能称','categoryName',this)">智能称</span><span onclick="filtrate('睡眠管理','categoryName',this)">睡眠管理</span><span onclick="filtrate('营养健康','categoryName',this)">营养健康</span><span onclick="filtrate('护理清洁','categoryName',this)">护理清洁</span><span onclick="filtrate('智能手表','categoryName',this)">智能手表</span><span onclick="filtrate('血压计','categoryName',this)">血压计</span><span></span><span onclick="filtrate('运动户外','categoryName',this)">运动户外</span></div>
        <table>
          <thead>
            <tr>
              <th>商品名称</th>
              <th>浏览量</th>
              <th>浏览人数</th>
              <th>付款人数</th>
              <th>单品转化率</th>
              <th>销售数量</th>
              <th>销售金额</th>
            </tr>
          </thead>
          <tbody id="tbody"></tbody>
        </table>
      </div>
        

    </div>
  </div>
  


<div>
  <span class="foot1">大健康综合管理后台</span>
  <span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
  <span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
</div>
 <script src="../JavaScript/index.js"></script>
<script src="../JavaScript/data.js"></script>
<script src="../JavaScript/utils.js"></script>
<script>
  let goods=getset(categoryData,'categoryData')//get商品类目数据
  let order=getset(orderData,'orderData')//get订单数据
  
  //合并数组
  let orderClass=order.map(item=>{
    for(let i=0;i<goods.length;i++){
      if(item.goodsName==goods[i].goodsName){
        
        item.categoryName=goods[i].categoryName
        return item
      } 
    }
  })

let a=num('智能手环',orderClass)
let b=num('智能称',orderClass)
let c=num('睡眠管理',orderClass)
let d=num('营养健康',orderClass)
let e=num('护理清洁',orderClass)
let f=num('智能手表',orderClass)
let g=num('血压计',orderClass)
let h=num('运动户外',orderClass)

    $(function () {
            $('#xiaoliang').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '各类目销量'
                },
                colors: ['#1890FF'],
                xAxis: {
                    categories: ['智能手环', '智能称', '睡眠管理', '营养健康', '护理清洁', '智能手表', '血压计','运动户外']
                },
                yAxis:{
                  title:{
                    text:''
                  }
                },
                credits: {
                    enabled: false
                },  
                series: [{
                    name: '各类目销量',
                    showInLegend: false,
                    data: [a,b,c,d,e,f,g,h]
                }
            ]
            });
        });
    
        $(function () {
            $('#xiaoshoue').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '各类目销售额'
                },
                colors: ['#1890FF'],
                xAxis: {
                    categories: ['智能手环', '智能称', '睡眠管理', '营养健康', '护理清洁', '智能手表', '血压计','运动户外']
                },
                yAxis:{
                  title:{
                    text:''
                  }
                },
                credits: {
                    enabled: true
                },
                series: [{
                    name: '各类目销售额',
                    showInLegend: false,
                    data: [salesNum('智能手环',orderClass),salesNum('智能称',orderClass),salesNum('睡眠管理',orderClass),salesNum('营养健康',orderClass),salesNum('护理清洁',orderClass),salesNum('智能手表',orderClass),salesNum('血压计',orderClass),salesNum('运动户外',orderClass)]
                }
            ]
            });
        });

      function num(val,data){//数据的属性的值，数据的来源
        let sum=0
        data.forEach(item => {

          for (var i in item) {
            if(item[i]==val)
            sum++
        }
        })
        return sum        
      }  
      function salesNum(val,data){
        let sum=0
        for(let i=0;i<data.length;i++){ 
          if(data[i].categoryName==val){
            let danjia=parseInt(data[i].goodsPrice) 
            sum+=danjia
            // console.log(sum)       
          }
        } return sum
      }
      function dianji(obj,num){        
        $(obj).siblings().css({
          backgroundColor: 'white',
          color: '#1890FF'
        })
        $(obj).css({
          backgroundColor: '#1890FF',
          color: 'white'
        })     
      }
    // 获取总销售额
    function sum(arr)
{
    var sum = 0;
    for(var i=0;i<arr.length;i++){
        sum += parseInt(arr[i].goodsPrice);
    }
    return sum;
}

function show(data){
  data.forEach(item=>{
    $('#tbody').append(
      `<tr>
        <td>${item.goodsName}</td>
        <td>2000</td>
        <td>200</td>
        <td>${data.length}</td>
        <td>${data.length/200*100+'%'}</td>
        <td>${data.length*2}</td>
        <td>${data.length*2*parseInt(item.goodsPrice)}</td>
      </tr>`)
  })
}
show(goods)
// filtrate('智能手环','categoryName')
  function filtrate(leiming,prop,obj){//商品的类名，数据对象的属性,
    $('#tbody').html('')
    let new_goods=[]
    console.log(goods.length)
    for(i=0;i<goods.length;i++){
      if(goods[i][prop]==leiming){
        new_goods.push(goods[i])
        
      }
    }
    $(obj).siblings().css({
      color:'#333'
    })
    $(obj).css({
      color:'#1890FF'
    })
    show(new_goods)
    
  }









// $('#goodsType>span').on('click',function(){
//   filtrate('智能称','categoryName')
// })

let zje=sum(orderClass)
    
    $('#znsh>span:nth-of-type(2)').append(num('智能手环',orderClass)) 
    $('#znsh>span:nth-of-type(3)').append((num('智能手环',orderClass)/orderClass.length*100).toFixed(2)+'%') 
    $('#znsh>span:nth-of-type(5)').append(salesNum('智能手环',orderClass)) 
    $('#znsh>span:nth-of-type(6)').append((salesNum('智能手环',orderClass)/zje*100).toFixed(2)+'%') 
    $('#znc>span:nth-of-type(2)').append(num('智能称',orderClass)) 
    $('#znc>span:nth-of-type(3)').append((num('智能称',orderClass)/orderClass.length*100).toFixed(2)+'%') 
    $('#znc>span:nth-of-type(5)').append(salesNum('智能称',orderClass)) 
    $('#znc>span:nth-of-type(6)').append((salesNum('智能称',orderClass)/zje*100).toFixed(2)+'%') 
    $('#smgl>span:nth-of-type(2)').append(num('睡眠管理',orderClass)) 
    $('#smgl>span:nth-of-type(3)').append((num('睡眠管理',orderClass)/orderClass.length*100).toFixed(2)+'%') 
    $('#smgl>span:nth-of-type(5)').append(salesNum('睡眠管理',orderClass)) 
    $('#smgl>span:nth-of-type(6)').append((salesNum('睡眠管理',orderClass)/zje*100).toFixed(2)+'%') 
    $('#yyjk>span:nth-of-type(2)').append(num('营养健康',orderClass)) 
    $('#yyjk>span:nth-of-type(3)').append((num('营养健康',orderClass)/orderClass.length*100).toFixed(2)+'%') 
    $('#yyjk>span:nth-of-type(5)').append(salesNum('营养健康',orderClass)) 
    $('#yyjk>span:nth-of-type(6)').append((salesNum('营养健康',orderClass)/zje*100).toFixed(2)+'%') 
    $('#hlqj>span:nth-of-type(2)').append(num('护理清洁',orderClass)) 
    $('#hlqj>span:nth-of-type(3)').append((num('护理清洁',orderClass)/orderClass.length*100).toFixed(2)+'%') 
    $('#hlqj>span:nth-of-type(5)').append(salesNum('护理清洁',orderClass)) 
    $('#hlqj>span:nth-of-type(6)').append((salesNum('护理清洁',orderClass)/zje*100).toFixed(2)+'%') 
    $('#znsb>span:nth-of-type(2)').append(num('智能手表',orderClass)) 
    $('#znsb>span:nth-of-type(3)').append((num('智能手表',orderClass)/orderClass.length*100).toFixed(2)+'%') 
    $('#znsb>span:nth-of-type(5)').append(salesNum('智能手表',orderClass)) 
    $('#znsb>span:nth-of-type(6)').append((salesNum('智能手表',orderClass)/zje*100).toFixed(2)+'%') 
    $('#xyj>span:nth-of-type(2)').append(num('血压计',orderClass)) 
    $('#xyj>span:nth-of-type(3)').append((num('血压计',orderClass)/orderClass.length*100).toFixed(2)+'%') 
    $('#xyj>span:nth-of-type(5)').append(salesNum('血压计',orderClass)) 
    $('#xyj>span:nth-of-type(6)').append((salesNum('血压计',orderClass)/zje*100).toFixed(2)+'%') 
    $('#ydhw>span:nth-of-type(2)').append(num('运动户外',orderClass)) 
    $('#ydhw>span:nth-of-type(3)').append((num('运动户外',orderClass)/orderClass.length*100).toFixed(2)+'%') 
    $('#ydhw>span:nth-of-type(5)').append(salesNum('运动户外',orderClass)) 
    $('#ydhw>span:nth-of-type(6)').append((salesNum('运动户外',orderClass)/zje*100).toFixed(2)+'%') 
    // ??????


// 销量数组
let sale=[]
function xiaoLi(data){
let a=num('小米手环4',data)
let b=num('小米手环3',data)
let c=num('华为手环',data)
let d=num('小米体重秤',data)
let e=num('小米便携体重秤',data)
let f=num('小米体重秤家庭版',data)
let g=num('小米记忆棉单人枕头',data)
let h=num('小米记忆棉双人枕头	',data)
let i=num('乳胶枕',data)
let j=num('纯棉枕头',data)
let k=num('全脂奶粉',data)
let l=num('碳酸钙钙片',data)
let m=num('维生素C咀嚼片',data)
let n=num('除螨皂',data)
let o=num('衣物除菌液',data)
let p=num('通话手表',data)
let q=num('血压测量仪便携式',data)
let r=num('臂式血压测量仪	',data)
let s=num('运动鞋',data)
sale.push(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s)
}

</script>
</body>
</html>